<template>
  <div class="node-bar">
    <div
      v-for="(node, index) in nodeList"
      :key="index"
      class="node-bar__node__warp"
    >
      <div
        class="node-bar__node"
        :class="[
          `node-bar__node--${node.type}`,
          `node-bar__node--${node.shape}`
        ]"
        :title="node.label"
        @mousedown="startDragToGraph($event, node)"
      >
        <div v-if="node.icon" style="transform: rotate(-45deg);">{{ node.icon }}</div>

        <img
          v-if="node.img"
          :src="node.img"
        >
      </div>

      <div class="node-bar__label">
        {{ node.text }}
      </div>
    </div>

    <!--    <div-->
    <!--      class="node-bar__node__warp"-->
    <!--    >-->
    <!--      <div-->
    <!--        class="node-bar__node"-->
    <!--        @mousedown="startDragToGraph($event, { shape: 'custom-vue-node' })"-->
    <!--      >-->

    <!--      </div>-->

    <!--      <div class="node-bar__label">-->
    <!--        自定义-->
    <!--      </div>-->
    <!--    </div>-->

  </div>
</template>
<script>
import { nodes } from '../../js/graphLib'
import ActivityNode from '@/views/approvalFlow/components/ActivityNode.vue'
export default {
  name: '',
  components: { ActivityNode },
  data() {
    return {

    }
  },
  computed: {
    nodeList() {
      return nodes
    }
  },
  methods: {
    handleDragOver(event) {
      event.preventDefault()
    },

    handleDrop(event) {
      event.preventDefault()
    },

    startDragToGraph(e, node) {
      this.$emit('addNode', { node, e })
    }
  }
}
</script>
<style lang="scss" scoped>
.node-bar {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  z-index: 1;
  padding: 20px;
  background-color: #fff;
  pointer-events: auto;

  &__label {
    margin-top: 10px;
    font-size: 12px;
    color: #333;
  }

  &__node__warp {
    height: auto;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: move;
    user-select: none;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__node {
    border-style: solid;
    border-color: #2F88FF;

    &--event {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #fff;
    }

    &--start-event {
      border-width: 1px;
    }

    &--end-event {
      border-width: 2px;
    }

    &--gateway {
      width: 32px;
      height: 32px;
      border-width: 2px;
      transform: rotate(45deg);
      font-size: 16px;
      color: #2F88FF;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &--activity {
      width: 32px;
      height: 20px;
      border-width: 1px;
      display: flex;
      border-radius: 2px;

      > img {
        width: 8px;
        height: 8px;
        margin: 2px;
      }
    }

  }

}
</style>
